<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" style="margin-top: 50px;margin-left: 60px;">
  <h1>敏感词管理</h1>
  <div style="float: left;line-height: 40px;">敏感名称:</div>
  <el-input
          placeholder="请输入内容"
          v-model="input"
          clearable style="width: 212px;float: left;margin-left: 15px;">
  </el-input>
  <!--div style="float: left;line-height: 40px;margin-left: 120px;margin-right: 16px;">状态:</div>
  <template >
    <el-select v-model="value" placeholder="请选择" style="float: left;">
      <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
      </el-option>
    </el-select>-->

  </template>
  <el-row style="float: left;margin-left: 70px;">
    <el-button type="primary" @click="inquire">查询</el-button>
  </el-row>

  <template>
    <el-table
            :data="tableData"
            stripe
            style="width: 100%; padding-top: 40px;">
      <el-table-column
              prop="articleTitle"
              label="敏感词名称"
              width="180">
      </el-table-column>
      <!--<el-table-column
              prop="articleAuthor"
              label="作者"
              width="180">
      </el-table-column>
      <el-table-column
              prop="channelName"
              label="所属频道"
              width="180">
      </el-table-column>
      <el-table-column
              prop="articleTime"
              label="发布时间"
              width="380">
      </el-table-column>
      <el-table-column
              prop="articleAuditStatus"
              label="状态"
              width="180">
      </el-table-column>-->
      <el-table-column
              prop="name"
              label="操作"
              width="180">
        <template slot-scope="scope">
          <el-button type="text" @click="query(scope.row.id)">添加</el-button>
          <el-button type="text" @click="pass(scope.row.id)">批量添加</el-button>
          <el-button type="text" @click="reject(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
  <!--分页组件-->
  <div class="pagination-container">
    <el-pagination
            class="pagiantion"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-size="pagination.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>
  </div>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../data/axios-0.18.0.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [],
        pagination: {
          //分页相关模型数据
          currentPage: 1,	//当前页码
          pageSize:8,	//每页显示的记录数
          total:0,		//总记录数
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      pass(id) {
        this.$confirm('是否通过?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // alert(id)
          axios({
            url:'/Susceptible',
            method:'post',
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消通过'
          });
        });
      },


     /* reject(id) {
        this.$confirm('是否驳回?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios({
            url:'/article/reject/'+id,
            method:'put',
          }).then(resp=>{
            if (resp.data.code == 1){
              this.$message({
                type: 'success',
                message: '驳回成功!'
              });
              this.init()
            }else {
              this.$message.error(resp.data.msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消驳回'
          });
        });
      },
      query(id){
        window.localStorage.setItem('queryId',id);
        location.href="article/query.html"
      },*/
      /*init(name,value){

        axios({
          method: "get",
          url: "/article/list/"+ this.pagination.currentPage +"/"+ this.pagination.pageSize,
          params:{
            name : name,
            state : value
          }
        }).then(res=>{
          console.log(res.data.data)
          this.pagination.total = res.data.data.total;
          this.pagination.currentPage = res.data.data.current;
          this.pagination.pagesize = res.data.data.size;
          this.tableData = res.data.data.records;
        })
      },*/
     /* inquire(){
        var name = this.input;
        var value = this.value;

        if(value!=null && value!=''){
          value = value == "选项1" ? "待审核" : "已审核"
        }
        this.init(name,value)
      },*/
      //切换页码
      handleCurrentChange(currentPage) {
        this.pagination.currentPage = currentPage;
        this.init();
      }
    }
  })
</script>
</html>